<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
        <link rel="stylesheet" type="text/css" href="./css/reset.css">
        <link rel="stylesheet" type="text/css" href="./css/index.css">
        <link rel="stylesheet" href="text/css" href="./css/common.css">
        <script src="./js/jquery.js"></script>
        <script src="./js/index.js"></script>
    <body>
            <!--上半部分开始-->
            <!--<div>-->
                <!--头部开始-->
            <header>
                <div style="margin: 0 auto; height: 45px; width: 1533px;">
                <div class="left-head">
                    <a href="#">小米商城</a>
                    <a href="#">MIUI</a>
                    <a href="#">IoT</a>
                    <a href="#">云服务</a>
                    <a href="#">金融</a>
                    <a href="#">有品</a>
                    <a href="#">小爱开放平台</a>
                    <a href="#">政企服务</a>
                    <a href="#" class="menu">
                        下载app
                    </a>
                    <span class="box1">
                        <img src="./images/code.jpg" alt="小米商城" title="小米商城" style="margin: 0 auto; width: 90px; height: 90px;display: block;">
                        <span style="text-align: center;font-size: 18px; color: #83645A; margin-top: 25px;line-height: 1px;display: block;">小米商城app</span>
                    </span>
                    <a href="#">Select Region</a>
                </div>
                <div class="right-head">
                    <a href="#">登陆</a>
                    <a href="#">注册</a>
                    <a href="#">消息通知</a>
                    <a href="#" class="box"><i class="iconfont" style="font-size: 16px;">&#xe600;&nbsp;&nbsp;购物车<span>(0)</span></i></a>
                </div>
                </div>
            </header>
                <!--头部结束-->
                <!--导航部分开始-->
                <div class="top-main">
                <div class="site-header">
                    <!--<div class="header-logo">小米官网</div> &lt;!&ndash;通过设置text-index: -9999px来隐藏文字,提高搜索引擎优化&ndash;&gt;-->
                    <div class="header-logo"><img src="./images/logo.png" alt="小米官网" title="小米官网"></div>
                    <div class="header-nav">
                        <ul>
                            <li><a href="#">小米手机</a></li>
                            <li><a href="#">红米</a></li>
                            <li><a href="#">电视</a></li>
                            <li><a href="#">笔记本</a></li>
                            <li><a href="#">空调</a></li>
                            <li><a href="#">新品</a></li>
                            <li><a href="#">路由器</a></li>
                            <li><a href="#">智能硬件</a></li>
                            <li><a href="#">服务</a></li>
                            <li><a href="#">社区</a></li>
                        </ul>
                    </div>
                    <div class="header-search">
                        <form action="" method="get">
                            <input class="search_key" type="text" name="" value="" >
                            <input class="iconfont btn_submit" type="submit" name="" value="&#xe6cf;">
                        </form>
                    </div>
                </div>
                    <!--导航部分结束-->
                    <!--banner部分开始-->
            <div class="home-banner">
                <!--<div class="left-site-container">-->
                <div class="left-site-category">
                    <!--左边栏目开始-->
                    <ul>
                        <li><a href="#" class="title">手机&nbsp;&nbsp;电话卡</a></li>
                        <li><a href="#" class="title">电视&nbsp;&nbsp;盒子</a></li>
                        <li><a href="#" class="title">笔记本&nbsp;&nbsp;平板</a></li>
                        <li><a href="#" class="title">家电&nbsp;&nbsp;插线板</a></li>
                        <li><a href="#" class="title">出行&nbsp;&nbsp;穿戴</a></li>
                        <li><a href="#" class="title">智能&nbsp;&nbsp;路由器</a></li>
                        <li><a href="#" class="title">电源&nbsp;&nbsp;配件</a></li>
                        <li><a href="#" class="title">健康&nbsp;&nbsp;儿童</a></li>
                        <li><a href="#" class="title">耳机&nbsp;&nbsp;音响</a></li>
                        <li><a href="#" class="title">生活&nbsp;&nbsp;箱包</a></li>
                    </ul>
                </div>
                <!--</div>-->
                <!--实现banner部分的轮播图部分-->
                <div class="right-site-container">
                <ul class="right-site-image">
                    <li class="image_show"><img src="./images/01.jpg" alt="" title="" style="width:1240px;height: 570px;"></li>
                    <li><img src="./images/02.jpg" alt="" title="" style="width:1240px;height: 570px;"></li>
                    <li><img src="./images/03.jpg" alt="" title="" style="width:1240px;height: 570px;"></li>
                    <li><img src="./images/04.jpg" alt="" title="" style="width:1240px;height: 570px;"></li>
                    <li><img src="./images/05.jpg" alt="" title="" style="width:1240px;height: 570px;"></li>
                </ul>
                    <!--这个列表用来显示圆点-->
                <ul id="list">
                    <li class="list_show">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
                    <!--这个列表用来显示箭头-->
                <ul id="round">
                    <li id="round_l">&lt;</li>
                    <li id="round_r">&gt;</li>
                </ul>
                </div>
                <!--这个盒子用来做在线咨询功能-->
                <div class="consult">
                    <ul class="bar-top">
                        <li class="bar_sort">
                            <a href="#" class="bar_link">
                            <div class="bar-img"><img src="./images/phone_app.png" alt=""></div>
                            <p class="bar-text">手机APP</p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="bar_link">
                                <div class="bar-img"><img src="./images/individual.png" alt=""></div>
                                <p class="bar-text">个人中心</p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="bar_link">
                                <div class="bar-img"><img src="./images/service.png" alt=""></div>
                                <p class="bar-text">联系客服</p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="bar_link">
                                <div class="bar-img"><img src="./images/shopping_car.png" alt=""></div>
                                <p class="bar-text">购物车</p>
                            </a>
                        </li>
                        <li class="totop">
                            <a href="#" class="bar_link">
                                <div class="bar-img totop_img"><img src="./images/totop.png" alt=""></div>
                                <p class="bar-text">回顶部</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <!--咨询结束-->
            </div>

            <div class="goods_show">
                <div class="left_goods_list">
                    <ul>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe6cf;</i>
                                <span>选购手机</span>
                            </a>
                        </li>
                        <li class="have_border">
                            <a href="#">
                                <i class="iconfont">&#xe6cf;</i>
                                <span>企业团购</span>
                            </a>
                        </li>
                        <li class="have_border">
                            <a href="#">
                                <i class="iconfont">&#xe6cf;</i>
                                <span>F码通道</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe6cf;</i>
                                <span>米粉卡</span>
                            </a>
                        </li>
                        <li class="have_border">
                            <a href="#">
                                <i class="iconfont">&#xe6cf;</i>
                                <span>以旧换新</span>
                            </a>
                        </li>
                        <li class="have_border">
                            <a href="#">
                                <i class="iconfont">&#xe6cf;</i>
                                <span>话费充值</span>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="goods_img1 com_img">
                    <img src="./images/小米8.jpg" alt="小米8" title="小米8">
                </div>
                <div class="goods_img2 com_img">
                    <img src="./images/红米6.jpg" alt="小米8" title="小米8">
                </div>
                <div class="goods_img3 com_img">
                    <img src="./images/小米手环3.jpg" alt="小米8" title="小米8">
                </div>
            </div>
            <!--<div>

            </div>-->
                    <!--闪购开始-->
            <div class="second_kill">
                    <div class="second_kill_header">
                        <!--标题-->
                        <h1>小米闪购</h1>
                        <!--导航箭头-->
                        <div class="nav-arrow">
                            <a href=""><i class="iconfont"></i></a>
                            <a href=""><i class="iconfont"></i></a>
                        </div>
                    </div>

                    <div class="second_kill_content">
                        <div class="countdown">
                            <div class="time_title">22:00场</div>
                            <img src="./images/flashpurchase.png" alt="">
                            <div class="distance_slogan">距离结束还有</div>
                            <div class="time">
                                <div class="box">00</div>
                                <div class="dosh">:</div>
                                <div class="box">12</div>
                                <div class="dosh">:</div>
                                <div class="box">05</div>
                            </div>
                        </div>

                        <div class="second_kill1 com_kill">
                                <a href="#" class="font-intro">
                                    <span class="comment">
                                    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
                                    </span>
                                    <span class="user">来自于15820397421的评价</span>
                                </a>
                        </div>

                        <div class="second_kill2 com_kill">

                        </div>
                        <div class="second_kill3 com_kill">

                        </div>
                        <div class="second_kill4 com_kill">

                        </div>
                    </div>
            </div>
                    <!--闪购结束-->
                    <!--top-main结束-->
                </div>

           <!-- <div>

            </div>
            </div>
            &lt;!&ndash;上半部分结束&ndash;&gt;

            &lt;!&ndash;中间部分开始&ndash;&gt;
            <div class="medium-body">

                <div>
                    &lt;!&ndash;左盒子&ndash;&gt;
                    <div></div>
                    &lt;!&ndash;右盒子&ndash;&gt;
                    <div>
                        &lt;!&ndash;上盒子&ndash;&gt;
                        <div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        &lt;!&ndash;下盒子&ndash;&gt;
                        <div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </div>

                <div>

                </div>

                <div>

                </div>

                <div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                
                <div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>

                &lt;!&ndash;内容部分&ndash;&gt;
                <div></div>
                <div>

                </div>

                &lt;!&ndash;视频部分&ndash;&gt;
                <div></div>
                <div>

                </div>

            </div>
            &lt;!&ndash;中间部分结束&ndash;&gt;
        </div>-->
            <!--底部开始-->
            <footer>
                <!--上半部分-->
                <div class="site-footer">
                    <div class="container">
                        <div class="footer-service">
                            <ul class="list-service clearfix">
                                <li><a href="#">预约维修服务</a></li>
                                <li><a href="#">7天无理由退货</a></li>
                                <li><a href="#">15天无理由换货</a></li>
                                <li><a href="#">满150包邮</a></li>
                                <li><a href="#">520余家售后网点</a></li>
                            </ul>
                        </div>

                        <div class="footer-links">
                            <dl class="col-links clearfix">
                                <dt>帮助中心</dt>
                                <dd><a href="#">账户管理</a></dd>
                                <dd><a href="#">购物指南</a></dd>
                                <dd><a href="#">订单操作</a></dd>
                            </dl>
                            <dl class="col-links">
                                <dt>服务支持</dt>
                                <dd><a href="#">售后政策</a></dd>
                                <dd><a href="#">自助服务</a></dd>
                                <dd><a href="#">相关下载</a></dd>
                            </dl>
                            <dl class="col-links">
                                <dt>线下门店</dt>
                                <dd><a href="#">小米之家</a></dd>
                                <dd><a href="#">服务网点</a></dd>
                                <dd><a href="#">授权体验店</a></dd>
                            </dl>
                            <dl class="col-links">
                                <dt>关于小米</dt>
                                <dd><a href="#">了解小米</a></dd>
                                <dd><a href="#">加入小米</a></dd>
                                <dd><a href="#">投资者关系</a></dd>
                            </dl>
                            <dl class="col-links">
                                <dt>关注我们</dt>
                                <dd><a href="#">新浪微博</a></dd>
                                <dd><a href="#">官方微信</a></dd>
                                <dd><a href="#">联系我们</a></dd>
                            </dl>
                            <dl class="col-links">
                                <dt>特色服务</dt>
                                <dd><a href="#">F码通道</a></dd>
                                <dd><a href="#">礼物码</a></dd>
                                <dd><a href="#">防伪查询</a></dd>
                            </dl>

                            <div class="col-contact clearfix">
                                <p class="phone">400-100-5678</p>
                                <p>周一至周日 8:00-18:00
                                    <br>
                                    （仅收市话费）
                                </p>
                                <a href="#" class="btn-line-primary">联系客服</a>
                            </div>

                        </div>
                    </div>
                </div>

                <!--下半部分-->
                <div class="site-info">
                    <!--版权部分-->
                    <div class="container">
                        <div class="logo">小米官网</div>
                        <div class="info-text">
                            <p class="shop">
                                <a href="#">小米商城</a>
                                <a href="">MIUI</a>
                                <a href="">米家</a>
                                <a href="">米聊</a>
                                <a href="">多看</a>
                                <a href="">游戏</a>
                                <a href="">路由器</a>
                                <a href="">米粉卡</a>
                                <a href="">政企服务</a>
                                <a href="">小米天猫店</a>
                                <a href="">隐私政策</a>
                                <a href="">问题反馈</a>
                                <a href="">廉政举报</a>
                                <a href="">Select Region</a>
                            </p>
                            <p class="lawyer_statement">
                                <a href="#">mi.com</a>
                                <span style="color: #B0B0B0;">京ICP证110507号</span>
                                <a href="#"> 京ICP备10046444号</a>
                                <a href="#"> 京公网安备11010802020134号</a>
                                <a href="#">京网文[2017]1530-131号</a>
                                <br>
                                <a href="#">（京）网械平台备字（2018）第00005号</a>
                                <a href="#">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a>
                                <a href="#">营业执照</a>
                                <a href="#">医疗器械公告</a>
                                <br>
                                <span style="color: #B0B0B0;">违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>
                            </p>
                        </div>
                        <div class="info-links">
                            <!--<a href="#"><img src="./images/truste.png" alt=""></a>-->
                            <a href="#"><img src="./images/v-logo-1.png" alt=""></a>
                            <a href="#"><img src="./images/v-logo-2.png" alt=""></a>
                            <a href="#"><img src="./images/v-logo-3.png" alt=""></a>
                            <a href="#"><img src="./images/v-logo-4.png" alt=""></a>
                        </div>
                    </div>
                    <div class="slogan"></div>
                </div>
            </footer>
            <!--底部结束-->
    </body>
    <script>
            //实现轮播图的功能
            $(function() {
                var $tabLi = $('.right-site-container #list li');
                var $picLi = $('.right-site-container .right-site-image li');
                var $btn = $('.right-site-container #round');
                var $btnDiv = $('.right-site-container #round li');
                var $banner = $('.right-site-container');
                var index = 0;
                var timer;
                $tabLi.hover(function() {
                    index = $(this).index();
                    fn();
                });
                $banner.hover(function() {
                    $btn.show();
                    clearInterval(timer);
                }, function() {
                    $btn.hide();
                    auto();
                });
                $btnDiv.click(function() {
                    var i = $(this).index();
//                    console.log(i);
                i ? index++ : index--;
                    fn();
                })/*.mousedown(function() {
                 return false;
                 })*/;
                auto();
                function auto() {
                    timer = setInterval(function() {
                        index++;
                        fn();
                    }, 1000);
                }
                function fn() {
//                    console.log(index);
                    if(index > $tabLi.length - 1) {
                        index = 0
                    } else if(index < 0) {
                        index = $tabLi.length - 1
                    }
                    $tabLi.eq(index).addClass('list_show').siblings().removeClass('list_show');
                    $picLi.eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();
                }
                /*实现回顶部的功能*/
                $(window).scroll(function(){    //通过触发窗口的滚动事件,判断什么时候显示"回到顶部"的那个按钮
                    if($(window).scrollTop()>=50){  //大于50个像素就显示
                        $(".totop").fadeIn();
                    }else{  //否则隐藏
                        $(".totop").fadeOut();
                    }
                });
                $(".totop").click(function(){    //给返回顶部按钮添加一个点击事件,通过一个动画来让滚动条滚到最上方
                    $("body").animate({scrollTop:0},500,function(){
                        alert("已经到最顶部了");
                    });
                });
                /*回到顶部功能结束*/
            });
            //轮播功能结束
    </script>
</html>